<template>
  <view class="login">
    <!-- <view class="nav">
      <u-navbar title="注册" leftIconColor="#fff" height="44"></u-navbar>
    </view> -->
    <view class="title-logo">
      <u--image
        class="logo-image"
        :showLoading="true"
        :src="logo"
        width="272rpx"
        height="68rpx"
      ></u--image>
    </view>
    <view class="login-container">
      <u--form :model="userInfo" :rules="rules" ref="uForm">
        <u-form-item prop="username">
          <u--input
            v-model="userInfo.username"
            placeholder="请输入用户名"
          ></u--input>
        </u-form-item>
        <u-form-item prop="nickname">
          <u--input
            v-model="userInfo.nickname"
            placeholder="请输入昵称"
          ></u--input>
        </u-form-item>
        <u-form-item prop="phone">
          <u--input
            v-model="userInfo.phone"
            placeholder="请输入手机号"
          ></u--input>
        </u-form-item>
        <u-form-item prop="email">
          <u--input
            v-model="userInfo.email"
            placeholder="请输入邮箱"
          ></u--input>
        </u-form-item>
        <u-form-item prop="password">
          <u--input
            v-model="userInfo.password"
            placeholder="请输入密码"
          ></u--input>
        </u-form-item>
        <u-form-item prop="actPassword">
          <u--input
            v-model="userInfo.actPassword"
            placeholder="请确认密码"
          ></u--input>
        </u-form-item>
      </u--form>
      <u-button type="primary" @click="submit" class="btn">注 册</u-button>
      <view class="register-btn" @click="linkLogin">立即登录</view>
    </view>
  </view>
</template>

<script>
import logo from "@/static/images/logo.png"; // 静态资源图片
import { register } from "@/api/login";
export default {
  data() {
    return {
      logo,
      userInfo: {
        username: "",
        nickname: "",
        phone: "",
        email: "",
        password: "",
        actPassword: "",
      },
      rules: {
        username: {
          type: "string",
          required: true,
          message: "请输入用户名",
          trigger: ["blur", "change"],
        },
        nickname: {
          type: "string",
          required: true,
          message: "请输入昵称",
          trigger: ["blur", "change"],
        },
        phone: {
          type: "string",
          required: true,
          message: "请输入手机号",
          trigger: ["blur", "change"],
        },
        email: {
          type: "string",
          required: true,
          message: "请输入邮箱",
          trigger: ["blur", "change"],
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["blur", "change"],
        },
        actPassword: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onLoad() {},
  methods: {
    async submit() {
      if (process.env.VUE_APP_PACKAGE === "externalize") {
        try {
          await this.$confirm(
            "亲，这是演示版，你没有权限!,想获得所有权限，请联系咨询老师，获取代码",
            "系统提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );
        } catch (error) {
          console.log(error);
        }
        return;
      }
      try {
        await this.$refs.uForm.validate();
        const res = await register(this.userInfo);
        if (res.code == 0) {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    linkLogin() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}
.login {
  .nav {
    height: 44px;
  }
  .title-logo {
    padding: 220rpx 0 90rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-container {
    padding: 0 64rpx;
    .btn {
      margin-top: 32rpx;
    }
    .register-btn {
      width: 120rpx;
      color: #3c9cff;
      font-size: 28rpx;
      margin-top: 32rpx;
      float: right;
    }
  }
}
</style>
